// 导入React和useState钩子，用于组件状态管理
import React, { useState } from "react"
// 导入Antd UI组件库的布局、排版、间距、分割线、卡片、网格组件
import { Layout, Typography, Space, Divider, Card, Row, Col } from "antd"
// 导入自定义的动态表单组件
import DynamicForm from "./components/DynamicForm"
// 导入表单Schema和表单数据的TypeScript类型定义
import type { FormSchema, FormData } from "./types/schema"
// 导入Antd的CSS重置样式，确保样式一致性
import "antd/dist/reset.css"
// 导入自定义的CSS样式文件
import "./App.css"

// 从Layout组件中解构出Header和Content子组件
const { Header, Content } = Layout
// 从Typography组件中解构出Title、Paragraph、Text子组件，用于文本排版
const { Title, Paragraph, Text } = Typography

// 定义示例表单的JSON Schema配置 - 用户配置表单
const userProfileSchema: FormSchema = {
  // 表单名称
  formName: "用户配置表单",
  // 表单描述信息
  description:
    "这是一个基于元数据驱动的动态表单示例，展示了字段联动、校验规则等功能。",
  // 表单布局方式：垂直布局
  layout: "vertical",
  // 提交按钮的文本
  submitText: "保存配置",
  // 表单字段配置数组
  fields: [
    {
      key: "welcomeTip",
      type: "slot",
      ui: {
        component: "Slot",
        slotName: "welcomeTip",
        label: ""
      },
    },
    {
      // 字段的唯一标识
      key: "username",
      // 字段数据类型
      type: "string",
      // UI配置对象
      ui: {
        // 字段显示标签
        label: "用户名",
        // 输入框占位符文本
        placeholder: "请输入用户名",
        // 使用的UI组件类型
        component: "Input",
      },
      // 字段校验规则数组
      rules: [
        // 必填校验规则
        { required: true, message: "用户名不能为空" },
        // 最小长度校验规则
        { minLength: 4, message: "长度不能少于4位" },
        // 最大长度校验规则
        { maxLength: 20, message: "长度不能超过20位" },
      ],
    },
    {
      // 邮箱字段配置
      key: "email",
      type: "string",
      ui: {
        label: "邮箱地址",
        placeholder: "请输入邮箱地址",
        component: "Input",
      },
      rules: [
        // 邮箱必填校验
        { required: true, message: "邮箱不能为空" },
        {
          // 邮箱格式正则表达式校验
          pattern: "^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$",
          message: "请输入有效的邮箱地址",
        },
      ],
    },
    {
      // 用户类型选择字段
      key: "userType",
      type: "select",
      ui: {
        label: "用户类型",
        component: "Select",
        placeholder: "请选择用户类型",
        // 下拉选项配置
        options: [
          { label: "普通用户", value: "user" },
          { label: "管理员", value: "admin" },
          { label: "超级管理员", value: "superadmin" },
        ],
      },
      rules: [{ required: true, message: "请选择用户类型" }],
    },
    {
      // 管理员角色字段，有条件显示
      key: "adminRole",
      type: "string",
      ui: {
        label: "管理员角色",
        placeholder: "请输入管理员角色",
        component: "Input",
      },
      rules: [{ required: true, message: "管理员角色不能为空" }],
      // 字段可见性规则：当userType为"admin"时才显示
      visibility: {
        key: "userType",
        value: "admin",
      },
    },
    {
      // 权限级别字段，有条件显示
      key: "permissions",
      type: "select",
      ui: {
        label: "权限级别",
        component: "Select",
        placeholder: "请选择权限级别",
        options: [
          { label: "只读", value: "readonly" },
          { label: "读写", value: "readwrite" },
          { label: "完全控制", value: "fullcontrol" },
        ],
      },
      rules: [{ required: true, message: "请选择权限级别" }],
      // 字段可见性规则：当userType为"superadmin"时才显示
      visibility: {
        key: "userType",
        value: "superadmin",
      },
    },
    {
      // 年龄数字输入字段
      key: "age",
      type: "number",
      ui: {
        label: "年龄",
        placeholder: "请输入年龄",
        component: "InputNumber",
      },
      rules: [
        { required: true, message: "年龄不能为空" },
        // 最小值校验
        { min: 18, message: "年龄不能小于18岁" },
        // 最大值校验
        { max: 100, message: "年龄不能大于100岁" },
      ],
    },
    {
      // 个人简介多行文本字段
      key: "bio",
      type: "string",
      ui: {
        label: "个人简介",
        placeholder: "请输入个人简介",
        component: "TextArea",
        // 文本域行数
        rows: 4,
      },
      rules: [{ maxLength: 500, message: "个人简介不能超过500字符" }],
    },
  ],
}

// 主应用组件函数
function App() {
  // 使用useState钩子管理已提交的表单数据状态
  const [submittedData, setSubmittedData] = useState<FormData | null>(null)
  // 使用useState钩子管理当前表单数据状态
  const [currentFormData, setCurrentFormData] = useState<FormData>({})

  // 表单提交处理函数
  const handleSubmit = (values: FormData) => {
    // 更新已提交数据状态
    setSubmittedData(values)
    // 控制台输出提交数据用于调试
    console.log("表单提交数据:", values)
  }

  // 表单数据变化处理函数
  const handleValuesChange = (changedValues: FormData, allValues: FormData) => {
    // 更新当前表单数据状态
    setCurrentFormData(allValues)
    // 控制台输出数据变化用于调试
    console.log("表单数据变化:", { changedValues, allValues })
  }

  // 返回JSX渲染内容
  return (
    // Antd布局组件，设置最小高度、背景色、滚动和上边距
    <Layout
      style={{
        minHeight: "100vh",
        backgroundColor: "#f0f2f5",
        overflow: "scroll",
        marginTop: "1000px",
      }}
    >
      {/* 内容区域组件，设置内边距 */}
      <Content style={{ padding: "24px" }}>
        {/* 垂直方向的间距组件，设置大间距和100%宽度 */}
        <Space direction="vertical" size="large" style={{ width: "100%" }}>
          {/* 栅格行组件，设置列间距 */}
          <Row gutter={24}>
            {/* 左侧列，占14个栅格单位，包含动态表单 */}
            <Col span={14}>
              {/* 动态表单组件 */}
              <DynamicForm
                // 传入表单Schema配置
                schema={userProfileSchema}
                // 传入提交处理函数
                onSubmit={handleSubmit}
                // 传入数据变化处理函数
                onValuesChange={handleValuesChange}
                // 设置表单初始值
                initialValues={{
                  username: "demo_user",
                  email: "demo@example.com",
                }}
                // 传入插槽配置，用于自定义渲染内容
                slots={{
                  welcomeTip: () => (
                    // 欢迎提示的自定义渲染内容
                    <div
                      style={{
                        color: "orange",
                        fontWeight: 500,
                        margin: "8px 0",
                      }}
                    >
                      👋 欢迎注册新用户！如有疑问请联系管理员。
                    </div>
                  ),
                }}
              />
            </Col>

            {/* 右侧列，占10个栅格单位，显示表单数据 */}
            <Col span={10}>
              {/* 垂直方向的间距组件 */}
              <Space
                direction="vertical"
                size="middle"
                style={{ width: "100%" }}
              >
                {/* 实时表单数据显示卡片 */}
                <Card title="实时表单数据" size="small">
                  {/* 预格式化文本，显示JSON格式的表单数据 */}
                  <pre
                    style={{
                      background: "#f5f5f5",
                      padding: "12px",
                      borderRadius: "4px",
                      fontSize: "12px",
                      maxHeight: "200px",
                      overflow: "auto",
                    }}
                  >
                    {/* 将表单数据格式化为JSON字符串显示 */}
                    {JSON.stringify(currentFormData, null, 2)}
                  </pre>
                </Card>

                {/* 条件渲染：如果有已提交数据，则显示该卡片 */}
                {submittedData && (
                  <Card title="最后提交的数据" size="small">
                    <pre
                      style={{
                        background: "#e6f7ff",
                        padding: "12px",
                        borderRadius: "4px",
                        fontSize: "12px",
                        maxHeight: "200px",
                        overflow: "auto",
                      }}
                    >
                      {/* 将已提交数据格式化为JSON字符串显示 */}
                      {JSON.stringify(submittedData, null, 2)}
                    </pre>
                  </Card>
                )}
              </Space>
            </Col>
          </Row>

          {/* 分割线组件 */}
          <Divider />
          {/* 项目介绍卡片 */}
          <Card>
            {/* 三级标题 */}
            <Title level={3}>项目介绍</Title>
            {/* 段落文本，介绍项目核心思想 */}
            <Paragraph>
              这是一个基于 <Text strong>JSON Schema</Text>{" "}
              的动态表单渲染引擎，核心思想是
              <Text mark>"用 JSON 来描述 UI"</Text>。
            </Paragraph>
            {/* 核心特性段落 */}
            <Paragraph>
              <Text strong>核心特性：</Text>
            </Paragraph>
            {/* 特性列表 */}
            <ul>
              <li>
                📝 <Text strong>JSON Schema 驱动：</Text>
                通过配置化的方式定义表单结构
              </li>
              <li>
                🔄 <Text strong>动态联动：</Text>
                字段之间可以基于条件进行显示/隐藏
              </li>
              <li>
                ✅ <Text strong>校验规则：</Text>
                支持多种内置校验规则，如必填、长度、正则等
              </li>
              <li>
                🎨 <Text strong>组件映射：</Text>
                灵活的组件映射机制，易于扩展新组件
              </li>
              <li>
                ⚡ <Text strong>实时响应：</Text>
                表单数据变化实时响应，支持复杂的业务逻辑
              </li>
            </ul>
          </Card>
          {/* 技术要点卡片 */}
          <Card>
            {/* 四级标题 */}
            <Title level={4}>核心技术要点</Title>
            {/* 技术要点网格布局 */}
            <Row gutter={16}>
              {/* Schema设计技术要点列 */}
              <Col span={8}>
                <Card size="small" title="Schema 设计">
                  <ul style={{ paddingLeft: "16px", fontSize: "14px" }}>
                    <li>字段定义与类型系统</li>
                    <li>UI配置与组件映射</li>
                    <li>校验规则配置</li>
                    <li>联动逻辑定义</li>
                  </ul>
                </Card>
              </Col>
              {/* 渲染引擎技术要点列 */}
              <Col span={8}>
                <Card size="small" title="渲染引擎">
                  <ul style={{ paddingLeft: "16px", fontSize: "14px" }}>
                    <li>动态组件渲染</li>
                    <li>条件显示逻辑</li>
                    <li>表单状态管理</li>
                    <li>实时数据联动</li>
                  </ul>
                </Card>
              </Col>
              {/* 扩展能力技术要点列 */}
              <Col span={8}>
                <Card size="small" title="扩展能力">
                  <ul style={{ paddingLeft: "16px", fontSize: "14px" }}>
                    <li>自定义组件注册</li>
                    <li>复杂校验规则</li>
                    <li>多种联动模式</li>
                    <li>主题与样式定制</li>
                  </ul>
                </Card>
              </Col>
            </Row>
          </Card>
        </Space>
      </Content>
    </Layout>
  )
}

// 导出App组件作为默认导出
export default App
